<template>
  <div id="areaMeasurement2D"></div>
</template>

<script>
import { loadModules } from "esri-loader";

export default {
  props: ["mapView"],
  methods: {
    initwidget() {
      let self = this;
      const options = {
        url: process.env.VUE_APP_arcgis_api_url
      };
      loadModules(["esri/widgets/AreaMeasurement2D"], options).then(
        ([AreaMeasurement2D]) => {
          if (self.mapView) {
            self.mapView.when(function() {
              const areaMeasurement = new AreaMeasurement2D({
                container: "areaMeasurement2D",
                view: self.mapView
              });
            });
          }
        }
      );
    }
  },
  mounted() {
    this.initwidget();
  }
};
</script>

<style scoped>
#areaMeasurement2D {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
</style>
